import * as React from 'react';
import {Modal,Form,Input} from 'antd'

class ServicePermissionManagerModalForm extends React.Component {

  constructor(props) {
    super(props);
    const allow = props.service.permission.allowAppNameList
    const denial = props.service.permission.denialAppNameList
    this.state = {
      allowStr: (allow && allow.length > 0) ? allow.join(',') : '',
      denialStr: (denial && denial.length > 0) ? denial.join(',') : ''
    }
  }

  render() {
    const allowProps = this.props.form.getFieldProps('allow', { initialValue: this.state.allowStr });
    const denialProps = this.props.form.getFieldProps('denial', { initialValue: this.state.denialStr });

    return (
      <Form horizontal>
        <Form.Item label="允许应用列表: " labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
          <Input {...allowProps} placeholder="输入允许应用名" style={{ width: 300 }}/>
          <span className="ant-form-text"> 一次添加多个可以,隔开</span>
        </Form.Item>

        <Form.Item label="拒绝应用列表: " labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
          <Input {...denialProps} placeholder="输入拒绝应用名" style={{ width: 300 }}/>
          <p className="ant-form-text"> 一次添加多个可以,隔开</p>
        </Form.Item>
      </Form>
    )
  }
}

const ModalForm = Form.create({})(ServicePermissionManagerModalForm);

class ServicePermissionManager extends React.Component {

  constructor(props) {
    super(props);
    this.state = { visible: false }
  }

  showModal() {
    this.setState({
      visible: true
    });
  }

  handleOk() {
    const form = this.refs.form;
    const service = this.props.service;

    var allow = form.getFieldValue("allow") || "";
    var denial = form.getFieldValue("denial") || "";

    this.setState({
      confirmLoading: true
    });

    this.props.onSave(service.id, allow, denial)
      .then(()=> {
        this.setState({
          visible: false,
          confirmLoading: false
        });
      });
  }

  handleCancel() {
    this.setState({
      visible: false
    });
  }

  render() {
    return (
      <Modal title="权限管理"
        visible={this.state.visible}
        onOk={::this.handleOk}
        confirmLoading={this.state.confirmLoading}
        onCancel={::this.handleCancel}>
        <ModalForm service={this.props.service} ref="form"/>
      </Modal>
    )
  }
}

export default ServicePermissionManager
